<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Markdown 实时预览</title>
  <!-- 引入 highlight.js 的 CSS 样式 -->
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css"> -->
  <link rel="stylesheet" href="./css/highlight.css">
  <style>
    body {
      display: flex;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .toolbar {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 10;
    }
    .toolbar button {
      margin-left: 5px;
      padding: 5px 10px;
      cursor: pointer;
    }
    .editor, .preview {
      width: 50%;
      height: 100%;
      overflow: auto;
      box-sizing: border-box;
      padding: 10px;
    }
    .editor {
      border-right: 1px solid #ccc;
      resize: none;
      font-size: 16px;
    }
    .preview {
      background: #f9f9f9;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <button id="download-md">下载 .md</button>
    <button id="download-html">下载 .html</button>
    <button id="download-pdf">下载 .pdf</button>
  </div>
  <textarea class="editor" placeholder="输入 Markdown 文本..."></textarea>
  <div class="preview"></div>

  <!-- 引入 marked.js 和 highlight.js -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.3/marked.min.js"></script> -->
  <script src="./js/marked.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script> -->
  <script src="./js/highlight.js"></script>
  <!-- 引入 html2canvas 和 jsPDF -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> -->
  <script src="./js/html2canvas.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> -->
  <script src="./js/jspdf.js"></script>
  <script>
    // 配置 marked.js 以使用 highlight.js 高亮代码
    marked.setOptions({
      highlight: function(code, lang) {
        if (lang && hljs.getLanguage(lang)) {
          return hljs.highlight(code, { language: lang }).value;
        } else {
          return hljs.highlightAuto(code).value;
        }
      }
    });

    const editor = document.querySelector('.editor');
    const preview = document.querySelector('.preview');

    // 实时更新预览
    editor.addEventListener('input', () => {
      const markdown = editor.value;
      const html = marked(markdown);
      preview.innerHTML = html;
    });

    // 初始化示例内容
    editor.value = "# 示例\n\n这是一个简单的Markdown编辑器。\n\n```javascript\nconsole.log('Hello, World!');\n```";
    preview.innerHTML = marked(editor.value);

    // 下载功能
    document.getElementById('download-md').addEventListener('click', downloadMd);
    document.getElementById('download-html').addEventListener('click', downloadHtml);
    document.getElementById('download-pdf').addEventListener('click', downloadPdf);

    function downloadMd() {
      const content = editor.value;
      const blob = new Blob([content], { type: 'text/markdown' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'document.md';
      a.click();
      URL.revokeObjectURL(url);
    }

    function downloadHtml() {
      // 内联 highlight.js 的 CSS 样式（从 ./css/highlight.css 简化）
      const cssContent = `
        .hljs {
          display: block;
          overflow-x: auto;
          padding: 0.5em;
          background: #f0f0f0;
          color: #333;
        }
        .hljs-keyword, .hljs-selector-tag, .hljs-subst {
          color: #0000ff;
          font-weight: bold;
        }
        .hljs-string, .hljs-meta, .hljs-regexp, .hljs-template-variable {
          color: #a31515;
        }
        .hljs-comment, .hljs-quote {
          color: #008000;
          font-style: italic;
        }
        .hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable {
          color: #098658;
        }
        .hljs-title, .hljs-name, .hljs-selector-id, .hljs-selector-class {
          color: #800000;
          font-weight: bold;
        }
      `;

      const content = `
        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
          <meta charset="UTF-8">
          <title>Markdown 文档</title>
          <style>${cssContent}</style>
        </head>
        <body>
          ${preview.innerHTML}
        </body>
        </html>
      `;
      const blob = new Blob([content], { type: 'text/html' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'document.html';
      a.click();
      URL.revokeObjectURL(url);
    }

    function downloadPdf() {
      html2canvas(preview).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const { jsPDF } = jspdf;
        const pdf = new jsPDF();
        const imgProps = pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save('document.pdf');
      }).catch(error => {
        console.error('PDF 生成失败:', error);
        alert('生成 PDF 时发生错误，请稍后重试。');
      });
    }
  </script>
</body>
</html>